<template>
    <view class="line-box">
        <navigator class="relative wlkflex bgw br04 mb20 overHidden shadow bgw" :url="'/pages/line/detail?id=' + line.id" v-for="(line,index) in list" :key="index">
            <view class="one-img">
                <image class="wd100 hg100" lazy-load :src="line.images[0]"  mode="aspectFill"/>
            </view>
            <view class="one-info wlkflex align-content-between wrap">
                <view class="wd100">
                    <view class="u-line-2 title">{{line.title}}</view>
                    <view class="u-line-1 desc">{{line.desc}}</view>
                    <view class="wlkflex tags">
                        <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                            <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                        </view>
                    </view>
                </view>
                <view class="wd100 price-info wlkflex justify-between">
                    <view v-if="line.minprice>0">
                        <span>￥</span>
                        <span class="price">{{line.minprice}}</span>
                        <span class="ml05">起</span>
                    </view>
                    <view v-else>
                        <span class="col9">暂无库存</span>
                    </view>
                    <view class="sales">
                        {{line.sales}}人出游
                    </view>
                </view>
            </view>
            <view class="line-start">
                {{line.startcity[line.startcity.length-1].name}}出发
            </view>
        </navigator>
    </view>
</template>

<script>
    import { mapGetters } from 'vuex';
	export default {
        name:"wlk-line-list",
        computed: {
            ...mapGetters(['themeColor'])
        },
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
    .line-box{
        padding: 30rpx 30rpx 20rpx 30rpx;
       .one-img{
           image{
               width: 308rpx;
               height: 308rpx;
               display: block;
           }
       }
       .one-info{
           height: 270rpx;
           width: 400rpx;
           padding: 0 20rpx;
           pointer-events: none;
           .title{
               font-weight: bold;
               font-size: $font-lt;
           }
           .desc{
               font-size: $font-sm;
               color: $-color-muted;
               margin-top: 4rpx;
           }
           .tags{
               margin-top: 8rpx;
               .tags-item{
                   margin-right: 10rpx;
               }
           }
           .price-info{
               font-size: $font-base;
               color: $-tour-price-color;
               .price{
                   font-size: $font-max;
               }
               .sales{
                   font-size: $font-sm;
                   color: $-color-muted;
               }
           }
       }
       .line-start{
           position: absolute;
           left: 0;
           top: 0;
           font-size: $font-sm;
           background-color: rgba(0,0,0,0.18);
           border-radius:4px 0 4px 0;
           padding: 6rpx 10rpx;
           color: #FFFFFF;
       }
    }
</style>
